"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _utils = require("../utils");

var _mobile = require("../utils/validate/mobile");

var _area = _interopRequireDefault(require("../area"));

var _field = _interopRequireDefault(require("../field"));

var _popup = _interopRequireDefault(require("../popup"));

var _toast = _interopRequireDefault(require("../toast"));

var _button = _interopRequireDefault(require("../button"));

var _dialog = _interopRequireDefault(require("../dialog"));

var _Detail = _interopRequireDefault(require("./Detail"));

var _switchCell = _interopRequireDefault(require("../switch-cell"));

var _createNamespace = (0, _utils.createNamespace)('address-edit'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1],
    t = _createNamespace[2];

var defaultData = {
    name: '',
    tel: '',
    country: '',
    province: '',
    city: '',
    county: '',
    areaCode: '',
    postalCode: '',
    addressDetail: '',
    isDefault: false
};

function isPostal(value) {
    return /^\d{6}$/.test(value);
}

var _default2 = createComponent({
    props: {
        areaList: Object,
        isSaving: Boolean,
        isDeleting: Boolean,
        validator: Function,
        showDelete: Boolean,
        showPostal: Boolean,
        searchResult: Array,
        showSetDefault: Boolean,
        showSearchResult: Boolean,
        saveButtonText: String,
        deleteButtonText: String,
        showArea: {
            type: Boolean,
            default: true
        },
        showDetail: {
            type: Boolean,
            default: true
        },
        detailRows: {
            type: Number,
            default: 1
        },
        detailMaxlength: {
            type: Number,
            default: 200
        },
        addressInfo: {
            type: Object,
            default: function _default() {
                return (0, _extends2.default)({}, defaultData);
            }
        },
        telValidator: {
            type: Function,
            default: _mobile.isMobile
        },
        postalValidator: {
            type: Function,
            default: isPostal
        },
        areaColumnsPlaceholder: {
            type: Array,
            default: function _default() {
                return [];
            }
        }
    },
    data: function data() {
        return {
            data: {},
            showAreaPopup: false,
            detailFocused: false,
            errorInfo: {
                tel: '',
                name: '',
                areaCode: '',
                postalCode: '',
                addressDetail: ''
            }
        };
    },
    computed: {
        areaListLoaded: function areaListLoaded() {
            return (0, _utils.isObj)(this.areaList) && Object.keys(this.areaList).length;
        },
        areaText: function areaText() {
            var _this$data = this.data,
                country = _this$data.country,
                province = _this$data.province,
                city = _this$data.city,
                county = _this$data.county,
                areaCode = _this$data.areaCode;

            if (areaCode) {
                var arr = [country, province, city, county];

                if (province && province === city) {
                    arr.splice(1, 1);
                }

                return arr.filter(function (text) {
                    return text;
                }).join('/');
            }

            return '';
        }
    },
    watch: {
        addressInfo: {
            handler: function handler(val) {
                this.data = (0, _extends2.default)({}, defaultData, {}, val);
                this.setAreaCode(val.areaCode);
            },
            deep: true,
            immediate: true
        },
        areaList: function areaList() {
            this.setAreaCode(this.data.areaCode);
        }
    },
    methods: {
        onFocus: function onFocus(key) {
            this.errorInfo[key] = '';
            this.detailFocused = key === 'addressDetail';
            this.$emit('focus', key);
        },
        onChangeDetail: function onChangeDetail(val) {
            this.data.addressDetail = val;
            this.$emit('change-detail', val);
        },
        onAreaConfirm: function onAreaConfirm(values) {
            values = values.filter(function (value) {
                return !!value;
            });

            if (values.some(function (value) {
                return !value.code;
            })) {
                (0, _toast.default)(t('areaEmpty'));
                return;
            }

            this.showAreaPopup = false;
            this.assignAreaValues();
            this.$emit('change-area', values);
        },
        assignAreaValues: function assignAreaValues() {
            var area = this.$refs.area;

            if (area) {
                var detail = area.getArea();
                detail.areaCode = detail.code;
                delete detail.code;
                (0, _extends2.default)(this.data, detail);
            }
        },
        onSave: function onSave() {
            var _this = this;

            var items = ['name', 'tel', 'areaCode', 'addressDetail'];

            if (this.showPostal) {
                items.push('postalCode');
            }

            var isValid = items.every(function (item) {
                var msg = _this.getErrorMessage(item);

                if (msg) {
                    _this.errorInfo[item] = msg;
                }

                return !msg;
            });

            if (isValid && !this.isSaving) {
                this.$emit('save', this.data);
            }
        },
        getErrorMessage: function getErrorMessage(key) {
            var value = String(this.data[key] || '').trim();

            if (this.validator) {
                var message = this.validator(key, value);

                if (message) {
                    return message;
                }
            }

            switch (key) {
                case 'name':
                    return value ? '' : t('nameEmpty');

                case 'tel':
                    return this.telValidator(value) ? '' : t('telInvalid');

                case 'areaCode':
                    return value ? '' : t('areaEmpty');

                case 'addressDetail':
                    return value ? '' : t('addressEmpty');

                case 'postalCode':
                    return value && !this.postalValidator(value) ? t('postalEmpty') : '';
            }
        },
        onDelete: function onDelete() {
            var _this2 = this;

            _dialog.default.confirm({
                title: t('confirmDelete')
            }).then(function () {
                _this2.$emit('delete', _this2.data);
            }).catch(function () {
                _this2.$emit('cancel-delete', _this2.data);
            });
        },
        // get values of area component
        getArea: function getArea() {
            return this.$refs.area ? this.$refs.area.getValues() : [];
        },
        // set area code to area component
        setAreaCode: function setAreaCode(code) {
            this.data.areaCode = code || '';

            if (code) {
                this.$nextTick(this.assignAreaValues);
            }
        },
        // @exposed-api
        setAddressDetail: function setAddressDetail(value) {
            this.data.addressDetail = value;
        },
        onDetailBlur: function onDetailBlur() {
            var _this3 = this;

            // await for click search event
            setTimeout(function () {
                _this3.detailFocused = false;
            });
        }
    },
    render: function render() {
        var _this4 = this;

        var h = arguments[0];
        var data = this.data,
            errorInfo = this.errorInfo,
            searchResult = this.searchResult;

        var onFocus = function onFocus(name) {
            return function () {
                return _this4.onFocus(name);
            };
        }; // hide bottom field when use search && detail get focused


        var hideBottomFields = searchResult && searchResult.length && this.detailFocused;
        return h("div", {
            "class": bem()
        }, [h("div", {
            "class": bem('fields')
        }, [h(_field.default, {
            "attrs": {
                "clearable": true,
                "label": t('name'),
                "placeholder": t('namePlaceholder'),
                "errorMessage": errorInfo.name
            },
            "on": {
                "focus": onFocus('name')
            },
            "model": {
                value: data.name,
                callback: function callback($$v) {
                    _this4.$set(data, "name", $$v);
                }
            }
        }), h(_field.default, {
            "attrs": {
                "clearable": true,
                "type": "tel",
                "label": t('tel'),
                "placeholder": t('telPlaceholder'),
                "errorMessage": errorInfo.tel
            },
            "on": {
                "focus": onFocus('tel')
            },
            "model": {
                value: data.tel,
                callback: function callback($$v) {
                    _this4.$set(data, "tel", $$v);
                }
            }
        }), h(_field.default, {
            "directives": [{
                name: "show",
                value: this.showArea
            }],
            "attrs": {
                "readonly": true,
                "clickable": true,
                "label": t('area'),
                "placeholder": t('areaPlaceholder'),
                "errorMessage": errorInfo.areaCode,
                "rightIcon": "arrow",
                "value": this.areaText
            },
            "on": {
                "focus": onFocus('areaCode'),
                "click": function click() {
                    _this4.showAreaPopup = true;
                }
            }
        }), h(_Detail.default, {
            "directives": [{
                name: "show",
                value: this.showDetail
            }],
            "attrs": {
                "focused": this.detailFocused,
                "value": data.addressDetail,
                "errorMessage": errorInfo.addressDetail,
                "detailRows": this.detailRows,
                "detailMaxlength": this.detailMaxlength,
                "searchResult": this.searchResult,
                "showSearchResult": this.showSearchResult
            },
            "on": {
                "focus": onFocus('addressDetail'),
                "blur": this.onDetailBlur,
                "input": this.onChangeDetail,
                "select-search": function selectSearch(event) {
                    _this4.$emit('select-search', event);
                }
            }
        }), this.showPostal && h(_field.default, {
            "directives": [{
                name: "show",
                value: !hideBottomFields
            }],
            "attrs": {
                "type": "tel",
                "maxlength": "6",
                "label": t('postal'),
                "placeholder": t('postal'),
                "errorMessage": errorInfo.postalCode
            },
            "on": {
                "focus": onFocus('postalCode')
            },
            "model": {
                value: data.postalCode,
                callback: function callback($$v) {
                    _this4.$set(data, "postalCode", $$v);
                }
            }
        }), this.slots()]), this.showSetDefault && h(_switchCell.default, {
            "class": bem('default'),
            "directives": [{
                name: "show",
                value: !hideBottomFields
            }],
            "attrs": {
                "title": t('defaultAddress')
            },
            "on": {
                "change": function change(event) {
                    _this4.$emit('change-default', event);
                }
            },
            "model": {
                value: data.isDefault,
                callback: function callback($$v) {
                    _this4.$set(data, "isDefault", $$v);
                }
            }
        }), h("div", {
            "directives": [{
                name: "show",
                value: !hideBottomFields
            }],
            "class": bem('buttons')
        }, [h(_button.default, {
            "attrs": {
                "block": true,
                "round": true,
                "loading": this.isSaving,
                "type": "danger",
                "text": this.saveButtonText || t('save')
            },
            "on": {
                "click": this.onSave
            }
        }), this.showDelete && h(_button.default, {
            "attrs": {
                "block": true,
                "round": true,
                "loading": this.isDeleting,
                "text": this.deleteButtonText || t('delete')
            },
            "on": {
                "click": this.onDelete
            }
        })]), h(_popup.default, {
            "attrs": {
                "position": "bottom",
                "lazyRender": false,
                "getContainer": "body"
            },
            "model": {
                value: _this4.showAreaPopup,
                callback: function callback($$v) {
                    _this4.showAreaPopup = $$v;
                }
            }
        }, [h(_area.default, {
            "ref": "area",
            "attrs": {
                "loading": !this.areaListLoaded,
                "value": data.areaCode,
                "areaList": this.areaList,
                "columnsPlaceholder": this.areaColumnsPlaceholder
            },
            "on": {
                "confirm": this.onAreaConfirm,
                "cancel": function cancel() {
                    _this4.showAreaPopup = false;
                }
            }
        })])]);
    }
});

exports.default = _default2;